<template>
	<view class="monitor-container">
		<uni-nav-bar left-icon="back" title="实时监控" color="#fff" backgroundColor="#26dfd4" fixed
			@clickLeft="leftIconClick">
		</uni-nav-bar>
		<scroll-view class="left" scroll-y="auto" :style="{marginTop: height + 40 +'px'}">
			<view class="left-item" v-for="(item,index) in videoList" :key="item.cid" @click="tabClick(index, item)"
				:class="{ 'active' : currentIndex === index}">{{item.videoName}}</view>
		</scroll-view>
		<view class="right" :style="{marginTop: height + 40 +'px'}">
			<view class="video-item">
				<video src="http://192.168.13.169:9999/flv?port=83&app=live&stream=181c87555f94416c8d795f44dd7b151e"
					style=" height: 360rpx;width: 100%;" controls="controls" autoplay="autoplay"></video>
				<view class="title">{{name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import flvjs from '../../utils/flv.min.js'
	import {
		myRequest
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				videoList: [],
				currentIndex: 0,
				name: '',
				height: null,
				videoUrl: ''
			}
		},
		onLoad() {
			this.videoUrl = 'http://192.168.13.169:9999/flv?port=83&app=live&stream=f4f6932667fb40809fb963084c49c967'
			this.getVideoList()
			let _this = this
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.height = data.statusBarHeight;
				}
			})
		},
		methods: {
			statechange(e) {
				console.log('live-player code:', e.detail.code)
			},
			error(e) {
				console.error('live-player error:', e.detail.errMsg)
			},
			// 获取施工区附近视频资源
			async getVideoList() {
				const {
					data: {
						code,
						data,
						msg
					}
				} = await myRequest({
					//#ifdef  H5
					url: '/btp/system/monitor/selectCamera/app?wayId=DBDE2B10-7E71-493D-8FE7-16AC5A9891C2',
					//#endif
					//#ifdef  MP-WEIXIN
					url: `http://139.224.204.68:10001/btp/system/monitor/selectCamera/app?wayId=DBDE2B10-7E71-493D-8FE7-16AC5A9891C2`,
					//#endif
					method: 'GET',
				})
				if (code == '200') {
					this.videoList = data
					this.name = this.videoList[0].videoName
				} else {
					uni.showToast({
						title: "请求接口失败！"
					})
				}
			},
			leftIconClick() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			startPlay(url) {
				if (flvjs.isSupported()) {
					let player = null;
					let videoElement = document.getElementById("myVideo");
					player = flvjs.createPlayer({
						type: "flv", //=> 媒体类型 flv 或 mp4
						isLive: true, //=> 是否为直播流
						hasAudio: false, //=> 是否开启声音
						url: url, //=> 视频流地址
					});
					player.attachMediaElement(videoElement); //=> 绑DOM
					player.load();
					player.play();
				} else {
					console.log("flvjs不支持");
				}
			},
			// 点击tab切换
			async tabClick(index, item) {
				this.currentIndex = index
				this.name = item.videoName
				const {
					data: {
						code,
						data,
						msg
					}
				} = await myRequest({
					//#ifdef  H5
					url: `/btp/system/monitor/selectCamera/app/detail?cid=${item.cid}&type=${item.type}`,
					//#endif
					//#ifdef  MP-WEIXIN
					url: `http://139.224.204.68:10001/btp/system/monitor/selectCamera/app/detail?cid=${item.cid}&type=${item.type}`,
					//#endif
				})
				if (code == '200') {
					console.log(data)
					this.videoUrl = data.url
					// this.startPlay(this.videoUrl)
					// this.videoList = data
					// this.name = this.videoList[0].videoName
				} else {
					uni.showToast({
						title: msg
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.monitor-container {
		width: 750rpx;
		height: 90%;
		// height: calc(100% - 40px);
		display: flex;

		.left {
			margin-top: 60px;
			width: 250rpx;
			height: 100%;
			background-color: #f7ffff;
			font-size: 24rpx;

			.left-item {
				width: 250rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;

				&.active {
					background-color: #fff;
				}
			}
		}

		.right {
			flex: 1;



			.video-item {
				margin-bottom: 20rpx;

				live-player {
					width: 100%;
					object-fit: fill;
					// height: 225 * 2rpx;
				}

				.title {
					line-height: 40rpx;
					padding-left: 10rpx;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
